<!-- 用户评价组件 -->
<template>
	<view class="evaluation-container-box">
		<view class="evaluation-item">
			<!-- 评分区域 -->
			<view class="score-box">
				<u-rate :disabled="true" size="26" :current="evaluationItem.star" active-color="#FFB54B" gutter="17"></u-rate>
			</view>
			<view class="score-box">
				<block v-for="(tag, i) in evaluationItem.tag_id" :key="i"><u-tag style="margin-right: 13rpx;" :text="tag" shape="square" size="mini" bg-color="#F4F4F6" border-color="#F4F4F6" color="#97979F" :closeable="false" /></block>
			</view>
			<text class="score-box text" user-select>{{evaluationItem.comment}}</text>
			<view class="score-box">
				<text style="margin-right: 2em;">{{evaluationItem.create_time}}</text>
				<text>{{evaluationItem.nick_name | setName}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"evaluate-item",
		props: {
			// 用户评价数据对象
			evaluationItem: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				// evaluationItem: {
				// 	id: 1,
				// 	// 默认选中的星星的数量
				// 	current: 5,
				// 	// 客户评价标签项列表
				// 	tags: [{
				// 		id: 1,
				// 		text: '回答很仔细',
				// 	},{
				// 		id: 2,
				// 		text: '回复很快',
				// 	},{
				// 		id: 3,
				// 		text: '解答了疑惑',
				// 	}],
				// 	content: '回答很仔细，一眼明了，感谢律师!',
				// 	time: '2021-09-12',
				// 	user_name: '李三思'
				// }
			};
		},
		filters: {
			// 处理评价用户的姓名除了姓其他显示 * 
			setName(name) {
				return name.substr(0,1)+new Array(name.length).join('*')
			}
		}
	}
</script>

<style lang="scss" scoped>
.evaluation-container-box {
	margin-top: 35rpx;
		position: relative;
		padding-bottom: 20rpx;
		&::after {
			position: absolute;
			left: -26rpx;
			bottom: 0;
			content: ' ';
			display: block;
			width: 750rpx;
			height: 1px;
			background-color: #E7EAF0;
		}
		.evaluation-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			.score-box {
				min-height: 55rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #97979F;
			}
			.text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #141418;
			}
		}
	}
</style>
